<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css"/>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/general.css"/>
		<style type="text/css">
			*{
				font-size: 0.9em;
			}
			.main{
				width: 100%;
				height: calc(100vh - 44px);
				background-color: white;
				padding: 0.5em;
			}
			.bdiv{
				border: 1px solid #C7C7C7;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 48px;
				border-radius: 10px;
				margin: 1em 0;
			}
			.bdiv>div:first-child{
				width: 25%;
				border-right: 1px solid #C7C7C7;
				height: 80%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bdiv>input{
				width: 50%;
				border: 0;
				height: 44px;
				margin-bottom: 0px;
				padding: 10px 15px;
			}
			.dcpsword{
				width: 70%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			input{
				width: 100%;
				border: 0;
				height: 44px;
				padding-left: 1em;
				margin-bottom: 0px;
				padding: 10px 15px;
			}
			input[type=password]{
				    margin-bottom: 0px;
				    border:0;
			}
			input[type=text]{
				margin-bottom: 0px;
				border:0;
			}
			
			
			.mui-input-row .mui-input-clear~.mui-icon-clear, .mui-input-row .mui-input-password~.mui-icon-eye, .mui-input-row .mui-input-speech~.mui-icon-speech {
    font-size: 20px;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 0;
    width: 38px;
    height: 38px;
    text-align: center;
    /*color: #999;*/
    color: #007aff;
}

.mui-input-row .mui-input-clear~.mui-icon-clear.mui-active, .mui-input-row .mui-input-password~.mui-icon-eye.mui-active, .mui-input-row .mui-input-speech~.mui-icon-speech.mui-active {
    /*color: #007aff;*/
    color: #999;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">找回密码</h1>
		</header>
		<div class="mui-content">
		    <div class="main">
		    	<div class="bdiv">
		    	    <div>手机号码</div>
		    	    <input type="text" id='phone' value="" placeholder="请输入手机号">
		    	</div>
		    	
		    	<div class="bdiv">
		    	    <div>验证码</div>
		    	    <input type="text" id='code' placeholder="请输入验证码">
		    	    <div id="getcode">
		    	    	获取验证码
		    	    </div>
		    	</div>
		    	<div class="bdiv">
		    	    <div>新密码</div>
		    	    <div class="dcpsword mui-input-row mui-password">
		    			<input type="" name="" class="mui-input-password"  id="psword" value="" placeholder="输入新密码"/>
		    		</div>
		    	</div>
		    	<div class="bdiv">
		    	    <div>确认密码</div>
		    	    <div class="dcpsword mui-input-row mui-password">
		    			<input type="" name="" class="mui-input-password"  id="psword2" value="" placeholder="输入新密码"/>
		    		</div>
		    	</div>
		    	
		    	<div class="">
		    		<button type="button" id="reg" class="mui-btn mui-btn-blue mui-btn-block">确认</button>
		    	</div>
		    </div>
		    
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lcs-util.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			(function(mui,doc){
				var settings = app.getSettings();
				var regButton = doc.getElementById('reg');
				var phone = doc.getElementById('phone');
				var psword = doc.getElementById('psword');
				var psword2 = doc.getElementById('psword2');
				var code = doc.getElementById('code');
				var getcode = doc.getElementById('getcode');
				var i = 60,flag = true;;
				regButton.addEventListener('tap', function(event) {
						
					var p1 = psword.value;
					var p2 = psword2.value;
					if(p1 !== p2){
						mui.toast("两次密码输入不一致，请确认密码");
						return;
					}
					
					var data = {
						url:"/api/employee/edit_pwd",
						data:{
							phone:phone.value,
							code:code.value,
							password:p1
						}
					}
					ajax(data,function(res){
						console.log(res)
						mui.toast(res.msg);
						setTimeout(function(){
							mui.back();
						},300)
					})
					});
					
				getcode.addEventListener('tap', function(event) {
						if(!util.phone_validation(phone.value)){
							return;
						}
						if(flag){
						var data = {
							url:"/api/code/get",
							data:{
								phone:phone.value,
								type:2,
								exist:2
							}
						}
						ajax(data,function(res){
							console.log(res);
							mui.toast(res.msg);
							var time;
							flag = !flag;
							//mui.toast('验证码已发送到您的手机，请稍等...');
							time = setInterval(function(){
								i--;
								$("#getcode").html(i);
								if(i < 1){
									i = 60;
									 clearInterval(time);
									 mui.toast("如果验证码未收到，请重发");
									 flag = !flag;
									 $("#getcode").html("重发");
								}
							},1000);
						})
						}
					});	
				
				
			})(mui,document)
		</script>
	</body>

</html>